<template>
  <view class="console-page">
    <!-- 选项卡头部 -->
    <view class="tab-header">
      <view class="tab-navbar">
        <view
          v-for="(tab, index) in tabs"
          :key="index"
          :class="['tab-item', { active: current === index }]"
          @click="switchTab(index)"
        >
          <text class="tab-text">{{ tab.name }}</text>
        </view>
      </view>
    </view>

    <!-- 选项卡内容 -->
    <view class="tab-content">
      <view v-if="current === 0" class="page-one">
        <!-- 上面的表格 -->
        <view class="dataBase">
          <view class="dataBase-title">
            <view class="title-text">告警处理数量全览表</view>
          </view>
          <view class="dataBase-content">
            <image
              src="/static/img/consolePages/mid-left.png"
              class="mid-left"
              mode="widthFix"
            ></image>
            <image
              src="/static/img/consolePages/mid-right.png"
              class="mid-right"
              mode="widthFix"
            ></image>
            <image
              src="/static/img/consolePages/mid-bottom.png"
              class="mid-bottom"
              mode="widthFix"
            ></image>
            <view class="table-container">
              <view class="table-header">
                <view class="row-header"></view>
                <view class="data-cell" v-for="time in timeRanges" :key="time">
                  <view>
                    <text>{{ time }}</text>
                  </view>
                </view>
              </view>
              <scroll-view class="table-body" scroll-y>
                <!-- 所有区域行 -->
                <view
                  class="table-row"
                  v-for="(areaData, areaIndex) in originalTableData"
                  :key="areaIndex"
                >
                  <view class="row-header">
                    <scroll-view 
                      class="area-name-scroll"
                      scroll-x
                      :scroll-left="0"
                      :show-scrollbar="false"
                    >
                      <text class="area-name-text">{{ areaData.label }}</text>
                    </scroll-view>
                  </view>
                  <view
                    class="data-cell"
                    v-for="time in timeRanges"
                    :key="time"
                    @click="handleTableCellClick(areaData.label, time)"
                  >
                    {{ getDataFromOriginal(areaData, time) }}
                  </view>
                </view>
              </scroll-view>
            </view>
            <view class="filter-group">
              <!-- 区域选择器（TnPicker） -->
              <tn-picker
                v-model:open="showAreaPicker"
                :data="areaPickerData"
                :model-value="areaValue"
                :immediate-change="false"
                :mask="true"
                :show-cancel="false"
                confirm-color="#1ec8e1"
                label-key="label"
                value-key="value"
                @confirm="onAreaConfirm"
              />
              <view class="filter-location" @click="showAreaPicker = true">
                <image
                  src="/static/img/consolePages/area-filter.png"
                  class="filter-icon"
                  mode="widthFix"
                ></image>
                <view class="filter-text">{{ areaLabel || '选择区域' }}</view>
              </view>
              <!-- 时间选择器（TnCalendar+TnPopup） -->
              <view class="filter-time" @click="showCalendar = true">
                <image
                  src="/static/img/consolePages/date-filter.png"
                  class="filter-icon"
                  mode="widthFix"
                ></image>
                <view class="filter-text">{{
                  selectDate.length ? selectDate.join(' - ') : '选择时间'
                }}</view>
              </view>
              <tn-popup
                v-model="showCalendar"
                open-direction="bottom"
                :custom-style="{ borderRadius: '32rpx 32rpx 0 0' }"
              >
                <tn-calendar
                  v-model="selectDate"
                  mode="range"
                  active-bg-color="#1ec8e1"
                  active-text-color="#fff"
                  range-bg-color="#3284d1"
                  range-text-color="#84d132"
                  range-start-desc="开始"
                  range-end-desc="结束"
                  min-date="2024-10-18"
                  :max-date="maxDate"
                  class="console-calendar"
                />
              </tn-popup>
              <!-- 查询按钮 -->
              <view class="filter-commit" @click="handleQuery">
                <view class="filter-text">确认筛选</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 下面的列表 -->
        <view class="warnList">
          <view class="warnList-title">
            <view class="title-left">
              <text class="title-text-left">告警列表</text>
              <view class="warn-count">{{ alarmStore.alarmList.length }}</view>
            </view>
            <view class="title-date">{{ getCurrentDate() }}</view>
          </view>
          <view
            class="warnList-item"
            v-for="(item, index) in alarmStore.alarmList"
            :key="item.id"
          >
            <view class="warnList-item-content" @click="handleAlarmClick(item)">
              <image
                src="/static/img/consolePages/warn-icon.png"
                class="warn-icon"
                mode="widthFix"
              ></image>
              <view class="warnList-item-info">
                <view class="warnList-item-host">{{ item.monitorDeviceName }}</view>
                <view class="warnList-item-desc">{{ item.location }}</view>
                <view class="warnList-item-time">{{ item.alertTime }}</view>
              </view>
              <view
                :class="[
                  'warn-status',
                  `status-${getStatusClass(item.alertStatus)}`,
                ]"
                >{{ item.alertStatus }}</view
              >
            </view>
            <view
              v-if="item.isRejected"
              class="warn-reject-tip"
            >
              {{ getRejectTipText(item) }}
            </view>
            <image
              class="left-bottom"
              src="/static/img/left-bottom.png"
              mode="widthFix"
            ></image>
            <image
              class="right-bottom"
              src="/static/img/right-bottom.png"
              mode="widthFix"
            ></image>
            <image
              class="left-top"
              src="/static/img/left-top.png"
              mode="widthFix"
            ></image>
            <image
              class="right-top"
              src="/static/img/right-top.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
      </view>
      <view v-else-if="current === 1" class="page-two">
        <view class="income-tab-bar">
          <view
            v-for="(tab, idx) in incomeTabs"
            :key="tab.key"
            :class="['income-tab-block', { active: incomeCurrent === idx }]"
            @click="incomeCurrent = idx"
          >
            {{ tab.name }}
            <image
              v-if="incomeCurrent === idx"
              class="left-bottom"
              src="/static/img/left-bottom.png"
              mode="widthFix"
            ></image>
            <image
              v-if="incomeCurrent === idx"
              class="right-bottom"
              src="/static/img/right-bottom.png"
              mode="widthFix"
            ></image>
            <image
              v-if="incomeCurrent === idx"
              class="left-top"
              src="/static/img/left-top.png"
              mode="widthFix"
            ></image>
            <image
              v-if="incomeCurrent === idx"
              class="right-top"
              src="/static/img/right-top.png"
              mode="widthFix"
            ></image>
          </view>
        </view>
        <view class="income-tab-content">
          <SafeIncome v-if="incomeCurrent === 0" />
          <ImportantDevices v-else-if="incomeCurrent === 1" />
          <ElectricityCalc v-else-if="incomeCurrent === 2" />
          <EnergyAdvice v-else-if="incomeCurrent === 3" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { createRequest } from '@/utils/request';
import { mygo } from '@/utils/useNavigator';
import SafeIncome from '@/pages/consolePages/SafeIncome.vue';
import ImportantDevices from '@/pages/consolePages/ImportantDevices.vue';
import ElectricityCalc from '@/pages/consolePages/ElectricityCalc.vue';
import EnergyAdvice from '@/pages/consolePages/EnergyAdvice.vue';
import { useAlarmStore } from '@/store/alarm';
import { useGlobalStore } from '@/store/app';
import { useAreaStore } from '@/store/area';
import { useAreaPickerStore } from '@/store/areaPicker';

const store = useGlobalStore();
const areaStore = useAreaStore();
const areaPickerStore = useAreaPickerStore();
const userRole = computed(() => store.userInfo.role);
const isOnsite = computed(() => userRole.value === 'onsite');

const current = ref(0);
const tabs = [
  { name: '告警处理', key: 'page1' },
  { name: '降本增效', key: 'page2' },
];

// 表格数据
const timeRanges = ['今日', '上周', '上月', '全部']; // 固定的时间跨度
const areaRanges = ref([]);
const tableData = ref({});
const originalTableData = ref([]); // 存储原始数据结构
const loading = ref(false);

// 筛选相关数据
const showAreaPicker = ref(false);
const areaValue = ref([]);
const areaLabel = ref('');
const showCalendar = ref(false);
const selectDate = ref([]); // 选中的日期区间

// 区域数据管理 - 使用 store 中的数据
const areaPickerData = computed(() => areaPickerStore.getAreaPickerData());

// 告警相关
const alarmStore = useAlarmStore();

// 收益计算页面选项卡
const incomeTabs = [
  { name: '安全收益', key: 'safe' },
  { name: '重点电器', key: 'important' },
  { name: '电费预估', key: 'calc' },
  { name: 'AI节能', key: 'advice' },
];
const incomeCurrent = ref(0);

// 从接口数据中提取区域信息，用于区域选择器
const extractAreaDataForPicker = (apiData) => {
  return areaPickerStore.processApiDataForPicker(apiData);
};



// 获取表格数据
const fetchTableData = async () => {
  loading.value = true;
  try {
    // 请求真实接口
    const res = await createRequest('/alert/statistics-by-region', { 
      method: 'GET' 
    });
    
    if (res.code === 200 && res.data) {
      // 处理接口返回的数据
      const processedData = processApiData(res.data);
      processTableData(processedData);
      
      // 提取区域数据用于选择器并存储到 store
      extractAreaDataForPicker(res.data);
    }
  } catch (e) {
    console.error('获取表格数据失败:', e);
  } finally {
    loading.value = false;
  }
};

// 处理接口返回的数据，转换为表格需要的格式
const processApiData = (apiData) => {
  const result = [];
  // 计算所有区域的总和
  let totalToday = 0;
  let totalLastWeek = 0;
  let totalLastMonth = 0;
  let totalAll = 0;
  // 递归计算总和
  const calculateTotals = (data) => {
    data.forEach(item => {
      totalToday += parseInt(item.todayCount) || 0;
      totalLastWeek += parseInt(item.lastWeekCount) || 0;
      totalLastMonth += parseInt(item.lastMonthCount) || 0;
      totalAll += parseInt(item.totalCount) || 0;
      
      if (item.children && item.children.length > 0) {
        calculateTotals(item.children);
      }
    });
  };
  
  calculateTotals(apiData);
  // 添加"所有区域"行
  result.push({
    label: '所有区域',
    value: 'all',
    children: [
      { label: '今日', value: totalToday },
      { label: '上周', value: totalLastWeek },
      { label: '上月', value: totalLastMonth },
      { label: '全部', value: totalAll },
    ],
  });
  
  // 递归处理每个区域，确保每个层级都有单独的行
  const processRegion = (regionData, parentPath = '') => {
    regionData.forEach(region => {
      // 构建完整的区域路径
      const fullPath = parentPath ? `${parentPath}-${region.label}` : region.label;
      
      // 为每个区域创建一行数据
      const regionRow = {
        label: fullPath,
        value: region.id,
        children: [
          { label: '今日', value: parseInt(region.todayCount) || 0 },
          { label: '上周', value: parseInt(region.lastWeekCount) || 0 },
          { label: '上月', value: parseInt(region.lastMonthCount) || 0 },
          { label: '全部', value: parseInt(region.totalCount) || 0 },
        ],
      };
      
      result.push(regionRow);
      
      // 如果有子区域，递归处理，传递当前完整路径
      if (region.children && region.children.length > 0) {
        processRegion(region.children, fullPath);
      }
    });
  };
  
  processRegion(apiData);
  
  return result;
};

// 处理表格数据，生成表格显示需要的格式
const processTableData = data => {
  // 直接存储原始数据，不再进行转换
  originalTableData.value = data;

  // 为了保持兼容性，仍然生成areaRanges和tableData（如果其他地方需要）
  areaRanges.value = [];
  tableData.value = {};

  // 递归处理数据（可选，用于兼容性）
  const processArea = (areaData, parentPath = '') => {
    const currentPath = parentPath
      ? `${parentPath}-${areaData.label}`
      : areaData.label;

    // 添加到区域列表
    areaRanges.value.push(currentPath);

    // 处理时间数据
    if (areaData.children && areaData.children.length > 0) {
      // 检查是否是时间数据（包含value为数字的子项）
      const hasTimeData = areaData.children.some(
        child => child.label && typeof child.value === 'number' && 
        ['今日', '上周', '上月', '全部'].includes(child.label)
      );

      if (hasTimeData) {
        // 这是时间数据
        tableData.value[currentPath] = {};
        areaData.children.forEach(timeItem => {
          tableData.value[currentPath][timeItem.label] = timeItem.value;
        });
      } else {
        // 这是区域数据，继续递归
        areaData.children.forEach(child => {
          processArea(child, currentPath);
        });
      }
    }
  };

  // 处理所有顶级区域
  data.forEach(area => {
    processArea(area);
  });

  // 无需启动文本滚动
};

// 从原始数据结构中获取数据
function getDataFromOriginal(areaData, time) {
  // 添加安全检查
  if (!areaData || !areaData.children || !Array.isArray(areaData.children)) {
    return 0;
  }

  // 查找对应时间的数据
  const timeData = areaData.children.find(child => child.label === time);
  return timeData ? timeData.value : 0;
}

// 判断区域是否包含时间数据
function hasTimeData(areaData) {
  // 添加安全检查
  if (!areaData || !areaData.children || !Array.isArray(areaData.children)) {
    return false;
  }

  // 检查是否包含时间数据（label为时间范围，value为数字）
  return areaData.children.some(child => 
    child.label && typeof child.value === 'number' && 
    ['今日', '上周', '上月', '全部'].includes(child.label)
  );
}

// 移除弹窗功能，使用scroll-view

function switchTab(index) {
  current.value = index;
}

function onAreaConfirm(val, item) {
  // val 是选中的 value 数组,item 是选中的对象数组
  areaValue.value = val;
  
  // 构建完整的区域路径显示文本
  const buildAreaPath = (items) => {
    if (!items || items.length === 0) return '';
    return items.map(item => item.label).join('-');
  };
  
  const selectedAreaPath = buildAreaPath(item);
  areaLabel.value = selectedAreaPath;
  
  // 处理"全部"选择逻辑
  const processAreaSelection = (items) => {
    let targetValue = null;
    let targetLabel = '';
    
    // 从外到内遍历，找到第一个"全部"
    for (let i = 0; i < items.length; i++) {
      const currentItem = items[i];
      const currentPath = i === 0 ? currentItem.label : targetLabel + '-' + currentItem.label;
      
      if (currentItem.value === 'all') {
        // 找到"全部"，使用上一级的value和路径
        targetValue = items[i - 1].value;
        targetLabel = i === 1 ? items[0].label : targetLabel;
        break;
      } else {
        // 继续构建路径
        targetLabel = currentPath;
        targetValue = currentItem.value;
      }
    }
    
    return {
      value: targetValue,
      label: targetLabel
    };
  };
  
  const selectedArea = processAreaSelection(item);
  
  // 更新选择的值（如果选择了"全部"，使用父级的value）
  if (selectedArea.value !== null) {
    // 找到对应的value在原始数组中的位置
    const valueIndex = val.findIndex(v => v === 'all');
    if (valueIndex !== -1) {
      areaValue.value = [...val];
      areaValue.value[valueIndex] = selectedArea.value;
    }
  }
  
  showAreaPicker.value = false;
}

// 格式化区域显示文本
function formatAreaDisplay(item) {
  if (!item || !Array.isArray(item)) {
    return '选择区域';
  }
  
  // 使用 area store 的格式化方法
  return areaStore.formatAreaDisplay(item);
}

function handleQuery() {
  // 检查区域和时间参数是否都存在
  if (
    areaValue.value &&
    areaValue.value.length > 0 &&
    selectDate.value &&
    selectDate.value.length > 0
  ) {
    // 从区域选择器中获取具体的区域ID
    let areaId = '';
    
    // 处理区域选择逻辑
    if (areaValue.value.length > 0) {
      // 找到最后一个非"all"的值作为区域ID
      for (let i = areaValue.value.length - 1; i >= 0; i--) {
        if (areaValue.value[i] !== 'all') {
          areaId = areaValue.value[i];
          break;
        }
      }
    }
    
    // 如果没有找到有效的区域ID，使用第一个值
    if (!areaId && areaValue.value.length > 0) {
      areaId = areaValue.value[0];
    }
    
    // 确保日期参数是数组格式
    const dateArray = Array.isArray(selectDate.value) ? selectDate.value : [selectDate.value];
    
    // 构建跳转参数
    console.log('handleQuery跳转参数:', { areaId, dateArray });
    
    mygo('/pages/consolePages/solveList', {
      area: areaId,
      date: dateArray.join(',')
    });
  } else {
    // 参数不完整时提示用户
    uni.showToast({
      title: '请选择区域和时间',
      icon: 'none',
    });
  }
}

function getDateRangeByLabel(label) {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1;
  const day = now.getDate();
  const today = `${year}-${String(month).padStart(2, '0')}-${String(
    day
  ).padStart(2, '0')}`;

  if (label === '今日') {
    return [today, today];
  }
  if (label === '上周') {
    // 计算上周一和上周日
    const dayOfWeek = now.getDay() || 7; // 周日为0，转为7
    const lastMonday = new Date(now);
    lastMonday.setDate(now.getDate() - dayOfWeek - 6);
    const lastSunday = new Date(now);
    lastSunday.setDate(now.getDate() - dayOfWeek);
    const mYear = lastMonday.getFullYear();
    const mMonth = String(lastMonday.getMonth() + 1).padStart(2, '0');
    const mDay = String(lastMonday.getDate()).padStart(2, '0');
    const sYear = lastSunday.getFullYear();
    const sMonth = String(lastSunday.getMonth() + 1).padStart(2, '0');
    const sDay = String(lastSunday.getDate()).padStart(2, '0');
    return [`${mYear}-${mMonth}-${mDay}`, `${sYear}-${sMonth}-${sDay}`];
  }
  if (label === '上月') {
    // 计算上月1号和上月最后一天
    const lastMonthDate = new Date(year, month - 2, 1); // 上月1号
    const lastMonthEndDate = new Date(year, month - 1, 0); // 上月最后一天
    const start = `${lastMonthDate.getFullYear()}-${String(
      lastMonthDate.getMonth() + 1
    ).padStart(2, '0')}-01`;
    const end = `${lastMonthEndDate.getFullYear()}-${String(
      lastMonthEndDate.getMonth() + 1
    ).padStart(2, '0')}-${String(lastMonthEndDate.getDate()).padStart(2, '0')}`;
    return [start, end];
  }
  if (label === '全部') {
    return ['2000-10-18', today];
  }
  return [today, today];
}

function handleTableCellClick(area, time) {
  if (area && time) {
    const [start, end] = getDateRangeByLabel(time);
    
    // 从表格数据中获取区域ID
    let areaId = '';
    
    if (area === '所有区域') {
      // 所有区域不传递具体区域ID
      areaId = '';
    } else {
      // 从原始表格数据中查找对应的区域ID
      const areaData = originalTableData.value.find(item => item.label === area);
      if (areaData) {
        areaId = areaData.value;
      }
    }
    
    // 构建跳转参数
    console.log('handleTableCellClick跳转参数:', { area, areaId, start, end });
    
    mygo('/pages/consolePages/solveList', {
      area: areaId,
      date: [start, end].join(',')
    });
  } else {
    uni.showToast({
      title: '区域或时间参数缺失',
      icon: 'none',
    });
  }
}



function handleAlarmClick(item) {
  // 根据角色和告警状态跳转到不同页面
  switch (item.alertStatus) {
    case '待确认':
      if (isOnsite.value) {
        // 现场角色：待确认跳转到处理提交页面，传递基础信息
        mygo('/pages/consolePages/handleSubmit', {
          id: item.id,
          location: item.location || '',
          alertTime: item.alertTime || ''
        });
      } else {
        // 非现场角色：待确认跳转到审核页面
        mygo(`/pages/consolePages/review?id=${item.id}&status=1&alertTime=${encodeURIComponent(item.alertTime || '')}&receiveTime=${encodeURIComponent(item.alertConfirmTime || '')}`);
      }
      break;
    case '待处理':
      if (isOnsite.value) {
        // 现场角色：待处理跳转到处理提交页面，传递基础信息
        mygo('/pages/consolePages/handleSubmit', {
          id: item.id,
          location: item.location || '',
          alertTime: item.alertTime || ''
        });
      } else {
        // 非现场角色：待处理跳转到审核页面
        mygo(`/pages/consolePages/review?id=${item.id}&status=2&alertTime=${encodeURIComponent(item.alertTime || '')}&receiveTime=${encodeURIComponent(item.alertConfirmTime || '')}`);
      }
      break;
    case '待审核':
      // 所有角色：待审核跳转到审核页面，带上角色参数和状态
      mygo(`/pages/consolePages/review?id=${item.id}&isOnsite=${isOnsite.value}&status=3&alertTime=${encodeURIComponent(item.alertTime || '')}&receiveTime=${encodeURIComponent(item.alertConfirmTime || '')}`);
      break;
    case '已结束':
      // 所有角色：已结束跳转到记录详情页面
      mygo(`/pages/consolePages/recordDetail?id=${item.id}`);
      break;
    default:
      break;
  }
}

function getRejectTipText(item) {
  // 根据状态返回不同的提示文本
  switch (item.alertStatus) {
    case '待确认':
      return '退回需重新处理';
    case '待处理':
      return '退回需重新处理';
    case '待审核':
      return '退回需重新审核';
    default:
      return '';
  }
}

function getStatusClass(status) {
  switch (status) {
    case '待确认':
      return 'processing';
    case '待处理':
      return 'processing';
    case '待审核':
      return 'reviewing';
    case '已结束':
      return 'completed';
    default:
      return 'default';
  }
}

function getCurrentDate() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 日历最大日期为今天
function getToday() {
  const d = new Date();
  const m = d.getMonth() + 1;
  const day = d.getDate();
  return `${d.getFullYear()}-${m < 10 ? '0' + m : m}-${
    day < 10 ? '0' + day : day
  }`;
}
const maxDate = getToday();

onLoad(() => {
  fetchTableData();
});

</script>

<style scoped lang="scss">
.console-page {
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
}

.tab-header {
  @include header-background;
  @include header-fixed;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40rpx;
}

.tab-navbar {
  display: flex;
  width: 100%;
  padding: 0 170rpx;
  border-radius: 16rpx 16rpx 0 0;
  margin: 0 25rpx;
}

.tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 0;
  position: relative;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 32rpx;
  color: #d3d3d3;
  font-weight: 500;
  transition: all 0.3s ease;
}

.tab-item.active {
  .tab-text {
    color: #f8f8f8;
    font-weight: bold;
  }

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    top: 80rpx;
    transform: translate(-50%, -50%);
    width: 60rpx;
    height: 4rpx;
    background: #04fbf8;
    border-radius: 2rpx;
  }
}

.tab-content {
  padding: 10rpx;
}

.dataBase {
  width: 686rpx;
  min-height: 162rpx;
  margin: 0 auto;
}

.dataBase-title {
  width: 686rpx;
  height: 60rpx;
  background-image: url('/static/img/homePages/chart-title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.title-text {
  letter-spacing: 3rpx;
  color: #fff;
  font-family: $font-family-youshe;
  opacity: 0.9;
  font-size: 36rpx;
  position: absolute;
  left: 50rpx;
  top: 7rpx;
}
.title-icon {
  color: #1ec8e1;
  font-size: 28rpx;
  margin-right: 12rpx;
}

.dataBase-content {
  padding: 10rpx;
  box-sizing: border-box;
  border-left: 1rpx solid #4491cb;
  border-right: 1rpx solid #4491cb;
  border-top: 1rpx solid #4491cb;
  position: relative;
  background: linear-gradient(180deg, #0b2b7c 0%, #04113a 100%);
}
.mid-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10rpx;
  height: 120rpx;
}
.mid-right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10rpx;
  height: 120rpx;
}
.mid-bottom {
  position: absolute;
  left: -5rpx;
  bottom: -12rpx;
  width: 694rpx;
  height: 12rpx;
}
.table-container {
  width: 100%;
}

.table-header {
  width: 100%;
  height: 94rpx;
  background-image: url('@/static/img/consolePages/table-header.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.power-icon {
  font-size: 20rpx;
}

.table-body {
  max-height: 400rpx;
}

.table-row {
  display: flex;
  border-bottom: 1rpx solid #2a4a7a;
  height: 80rpx;
  box-sizing: border-box;
}

.row-header {
  flex: 1.5;
  padding: 20rpx 16rpx;
  font-size: 20rpx;
  color: #fff;
  display: flex;
  align-items: center;
  min-width: 120rpx;
  box-sizing: border-box;
}

.area-name-scroll {
  width: 100%;
  height: 100%;
  white-space: nowrap;
}

.area-name-text {
  font-size: 20rpx;
  color: #fff;
  white-space: nowrap;
  display: inline-block;
  min-width: max-content;
}

.data-cell {
  flex: 1;
  padding: 20rpx 16rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120rpx;
  box-sizing: border-box;
  transition: background-color 0.2s;
}

.filter-group {
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 30rpx 10rpx 0;
}

.filter-location,
.filter-time,
.filter-commit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 18rpx;
  background-color: rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
  min-width: 100rpx;
  height: 36rpx;
  color: #fff;
  padding: 4rpx 10rpx;
  box-sizing: border-box;
  margin-left: 16rpx;
}

.filter-location:active,
.filter-time:active,
.filter-commit:active {
  transform: scale(0.95);
  background-color: rgba(#3abdff, 0.9);
  color: #333;
}

.filter-icon {
  width: 24rpx;
  height: 24rpx;
}

.filter-text {
  font-size: 24rpx;
  text-align: center;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-calendar {
  // padding: 0 60rpx 60rpx 0;
  box-sizing: border-box;
  color: #eee;
  // 你可以继续添加更多自定义样式
}

:deep(.uni-picker-view-mask) {
  background: transparent !important;
}

// 清空calendar数据区域的padding
:deep(.tn-calendar__data) {
  box-sizing: border-box !important;
}

// 清空calendar星期文字的padding
:deep(.tn-calendar__week-text) {
  box-sizing: border-box !important;
}

:deep(.tn-calendar__operation) {
  box-sizing: border-box !important;
}

.warnList {
  margin: 40rpx auto 0;
  width: 686rpx;
}
.warnList-title {
  width: 100%;
  height: 60rpx;
  background-image: url('@/static/img/consolePages/warnList-title.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-left {
  display: flex;
  align-items: center;
  margin-left: 60rpx;
  font-size: 32rpx;
  color: #fff;
}
.title-text-left {
  letter-spacing: 4rpx;
  font-family: $font-family-youshe;
  opacity: 0.9;
  font-size: 36rpx;
  margin-bottom: 8rpx;
}
.warn-count {
  background: #ff4757;
  color: #fff;
  border-radius: 16rpx;
  min-width: 32rpx;
  height: 32rpx;
  padding: 0 8rpx;
  font-size: 20rpx;
  margin-left: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: bold;
  text-align: center;
}

.title-date {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  margin-right: 48rpx;
}

.warnList-item {
  width: 100%;
  height: 200rpx;
  border: 1rpx solid #50daff;
  margin-top: 26rpx;
  padding: 20rpx;
  box-sizing: border-box;
  position: relative;
  background: linear-gradient(180deg, #0b2b7c 0%, #04113a 100%);
}

.left-bottom {
  position: absolute;
  left: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-bottom {
  position: absolute;
  right: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.left-top {
  position: absolute;
  left: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-top {
  position: absolute;
  right: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.warnList-item-content {
  display: flex;
  align-items: flex-start;
  width: 100%;
  position: relative;
}
.warn-icon {
  width: 160rpx;
  height: 160rpx;
  margin-top: 6rpx;
  transform: scale(1.1);
}
.warnList-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.warnList-item-host {
  flex: 1;
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8rpx;
}

.warnList-item-desc {
  flex: 1;
  font-size: 24rpx;
  color: #ccc;
  margin-bottom: 8rpx;
}

.warnList-item-time {
  flex: 1.2;
  font-size: 22rpx;
  color: #999;
}

.warnList-item-handler {
  font-size: 22rpx;
  color: #7ecbff;
  margin-top: 4rpx;
}

.warn-status {
  color: #eee;
  padding: 0 16rpx;
  font-size: 26rpx;
  position: absolute;
  right: -21rpx;
  top: -20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40rpx;
  min-width: 80rpx;
  line-height: 1;
  text-align: center;
  z-index: 3;
}

.status-processing {
  background: #ff871e;
}

.status-reviewing {
  background: #ffb74d;
}

.status-completed {
  background: #04fbf8;
  color: #333;
}

.status-default {
  background: #747d8c;
}

.warn-reject-tip {
  position: absolute;
  right: 8rpx;
  bottom: 12rpx;
  color: #ff871e;
  font-size: 24rpx;
  border-radius: 8rpx;
  padding: 4rpx 16rpx;
  z-index: 2;
  letter-spacing: 2rpx;
}

.income-tab-bar {
  display: flex;
  width: 100vw;
  box-sizing: border-box;
  justify-content: space-between;
  position: fixed;
  @include fixed-top;
  left: 0;
  z-index: 998;
  height: 100rpx;
  margin-top: -40rpx;
  padding: 0 12rpx;
  background-color: #172869;
}
.income-tab-block {
  flex: 1;
  margin: 0 16rpx;
  background: transparent;
  border: 1rpx solid #2dbef8;
  text-align: center;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  transition: all 0.2s;
  position: relative;
  top: 40rpx;
  box-shadow: none;
  min-width: 0;
  height: 50rpx;
  line-height: 50rpx;
}
.income-tab-block.active {
  border: 1rpx solid #1ec8e1;
  color: #fff;
  font-weight: bold;
  position: relative;
}
.left-bottom {
  position: absolute;
  left: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-bottom {
  position: absolute;
  right: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.left-top {
  position: absolute;
  left: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.right-top {
  position: absolute;
  right: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}
.income-tab-content {
  min-height: calc(100vh - 500rpx);
  margin: 60rpx auto;
}
</style>
